<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>瀑布流</title>
<script src="javascript/jquery-1.11.1.min.js"></script>
<style>
	*{margin:0;padding:0}
	.container{
		border:2px solid red;
		margin:50px auto;
		position:relative;
	}
	.container img{
		position:absolute;
		display:block;
	}
	.footer{
		position:fixed;
		left:0;
		bottom:0;
		height:60px;
		background:url(Refresh.gif) no-repeat center;
		width:100%;
	}
	
</style>
</head>

<body>
	<div class="container">
    	
    </div>
    <div class="footer"></div>
</body>
<script>
	$(document).ready(function(e) {
		var container=$(".container");
		var footer=$(".footer");
        var imgWidth=200;/*图片的宽*/
		var imgpadding=10;/*图片的间隔*/
		var awidthandpadding=imgWidth+imgpadding;/*实际图片所占的宽度*/
		var cells=0;/*列数*/
		var url="http://www.wookmark.com/api/json/popular?callback=?";
		var page=0;
		var arrt=[];/*向上定位的位子*/
		var arrl=[];/*left 定位的位子*/
		var trueAndfalse=true;
		setCells();
		function setCells(){
			cells=Math.floor($(window).innerWidth()/awidthandpadding);
			if(cells>8){
				cells=8;
			}
			if(cells<3){
				cells=3;
			}
			container.css("width",cells*awidthandpadding-imgpadding);
		}
		document.title=cells;
		
		for(var i=0;i<cells;i++){
			arrt.push(0);
			arrl.push(i*awidthandpadding);
		}
		function getdata(){
			if(trueAndfalse){
				trueAndfalse=false;
				footer.show();
				$.getJSON(url,"page="+page,function(data){
						
						$.each(data, function(index,a){
								var img=$("<img />");
								img.attr("src",a.preview);
								container.append(img);
								var mintop=getMin();
								var bheight=imgWidth/a.width*a.height;
								/*console.log(imgWidth+","+bheight+","+arrl[1]+","+arrt[mintop]);*/
								img.css({
									width:	imgWidth ,
									height:		bheight
								});
								/*设置定位*/
								img.css({
									left:	arrl[mintop],
									top:	arrt[mintop]
									});
									
								arrt[mintop]+=(bheight+10);
								footer.hide();
								
								trueAndfalse=true;
							});
				});
			}
		}
			
		getdata();
			
		$(window).on("scroll",function(){
			var h=$(window).scrollTop()+$(window).innerHeight();
			var mint=getMin();
			if(arrt[mint]+container.offset().top<h){
				page++;
				getdata();
			}
		});
		/*当页面改变的时候*/
		$(window).on("resize",function(){
			var oldcells=cells;
			setCells();
			if(oldcells==cells){
				return;
			}
			arrt=[];/*清空*/
		 	arrl=[];
			for(var i=0;i<cells;i++){
				arrt.push(0);
				arrl.push(i*awidthandpadding);
			}
			
			var aimage=container.find("img");
			aimage.each(function(index, element) {
                var mint=getMin();
				/*$(this).css({
					left:	arrl[mint],
					top:	arrt[mint]
					});*/
				$(this).animate({
					left:	arrl[mint],
					top:	arrt[mint]
					});
				arrt[mint]+=$(this).height()+10;
            });
		});
		
		
		
		function getMin(){
			var a=arrt[0];
			var _index=0;/*标记第几个是最小的*/
			for(var i=1;i<arrt.length;i++){
				if(arrt[i]<a){
					a=arrt[i];
					_index=i;
				}
			}
			return _index;
		}
    });
	

</script>
</html>
